<template>
  <div class="productdetails">
    <div class="center">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '../Product'}">产品展示</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.ProductDetailsPage.title}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="content">
             <h3>{{this.ProductDetailsPage.title}}</h3>
             <span class="time"></span>
             <span class="partition"></span>
             <p v-html="this.ProductDetailsPage.body"></p>
        </div>
        <div class="download" v-show="dowloadShow">
              <a :href="this.dowloadShow" target="blank">
                <img src="/home/static/imgs/dowload.jpg" alt="产品下载图标">
              </a>
        </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from "../../common/Footer"
export default {
  name: 'ProductDetails',
  components:{
      Footer
  },
  data(){
      return{
        ProductDetailsPage:{},
        id: null,
        dowloadShow: ''
      }
  },
  methods: {
      getId(){
          this.id = this.$route.params.id
      }
  },
  created(){
      this.getId();
      var node = this;
      window.$.get(this.apiUrl+'/articles/' + this.id,{
            id: this.id
      }, function (res) {
          node.ProductDetailsPage = res.data;
          node.dowloadShow = res.data.doc_url;
      })
  }
}
</script>
<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
  overflow: hidden;
}
.productdetails{
    width: 100%;
    height: auto;
    margin-top: 40px;
}
.productdetails .center{
    width: 1200px;
    height: auto;
    margin: 0 auto 59px;
    position: relative;
}
.productdetails .center .content{
    position: relative;
    margin-top: 20px;
    margin-bottom: 100px;
    width: 1200px;
    height: auto;
}
.productdetails .center .content h3{
    width: 1200px;
    height: auto;
    font-size: 36px;
    color: #000;
    text-align: center;
    margin-top: 100px;
}
.productdetails .center .content .time{
    position: absolute;
    top: 161px;
    right: 20px;
    color: #666;
    font-size: 18px;
    display: inline-block;
}
.productdetails .center .content .partition{
    width: 1200px;
    height: 0;
    border-top: 1px solid #e5e5e5;
    margin-top: 30px;
    display: inline-block;  
}
.productdetails .center .content p{
    width: 1200px;
    height: auto;
    font-size: 16px;
    color: #666;
    padding-top: 10px;
}
.productdetails .center .content img{
    width: 100%;
    height: auto;
}
.productdetails .center .download{
    width: 204px;
    height: 46px;
    float: right;
    margin-top: 50px;
}
.productdetails .center .download img{
    width: 100%;
    height: auto;
}
</style>
